<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收费管理</title>
</head>

<body>
    <header>
        <div id="hd-left">
            <div id="logo">
                <img src="../src/images/logo-top.png" alt="" id="hd-logo-top">
                <img src="../src/images/logo-down.png" alt="" id="hd-logo-down">
            </div>
            <span>热爱105°C的你</span>
        </div>
        <ul id="hd-right">
            <img src="../src/images/我的-头像.png" alt="" id="hd-touxiang">
            <div id="hd-chose">
                <select name="" id="hd-select">
                    <option value="">蒲嘉伟666</option>
                </select>
                <ul id="xialacaidan">
                    <li>个人中心</li>
                    <li>修改密码</li>
                    <li>退出登录</li>
                </ul>
            </div>
            <img src="../src/images/消息.png" alt="" id="hd-news">
            <img src="../src/images/我的-设置.png" alt="" id="hd-setting">
            </div>
    </header>
    <main>
        <div id="main-left">
            <ul>
                <li id="main-left-sy" class=""><img src="./images/sy.png" alt="">首页</li>
            </ul>
            <ul class="sj">
                <li><img src="./images/sjzx.png" alt="">数据中心</li>
                <li>小区管理</li>
                <li>楼宇管理</li>
                <li>车位管理</li>
                <li>业主管理</li>
                <li>租客管理</li>
                <li>访客管理</li>
                <li>广告位管理</li>
                <li>车辆管理</li>
            </ul>
            <ul class="sf">
                <li class="l"><img src="./images/sfgl.png" alt="">收费管理</li>
                <li class="l1">收银台</li>
                <li class="l2">抄表录入</li>
                <li class="l3">未交账单</li>
                <li class="l4">缴费通知</li>
                <li class="l5">已交账单</li>
                <li class="l6">预存款管理</li>
                <li class="l7">收费设置</li>
            </ul>
            <ul class="wy">
                <li class="go-yw"><img src="./images/ywfw.png" alt="">物业服务</li>
                <li>公告管理</li>
                <li>报事报修</li>
                <li>投诉管理</li>
                <li>短信管理</li>
                <li>装修管理</li>
            </ul>
            <ul class="zl">
                <li><img src="./images/zlgl.png" alt="">租赁管理</li>
                <li>客户管理</li>
                <li>车位租赁</li>
                <li>广告位租赁</li>
                <li>房屋租赁</li>
                <li>合同管理</li>
            </ul>
            <ul class="wl">
                <li><img src="./images/wlgl.png" alt="">物料管理</li>
                <li>供应商管理</li>
                <li>仓库管理</li>
                <li>物料清单</li>
                <li>采购入库</li>
                <li>领用出库</li>
                <li>维修领退材</li>
                <li>库存查询</li>
            </ul>
        </div>
        <div id="main-right">
            <!-- 收银台首页 -->
            <div class="table-form main-cashier" id="cashierIndex" style="display: none;">

                <div class="cashier-title">
                    <h3>收银台</h3>
                    <p>功能说明：可根据住户姓名、住户手机号、房号、车位号、车牌号，快速搜索对应的未缴费用，修改未缴费用的优惠及滞纳金金额，完成对未缴费用的收取。</p>
                </div>

                <div class="cashier-main">
                    <ul class="cashier-search">
                        <li>
                            <select name="" id="cashier_searchInput">
                                <option value="ownerHomeNumber">房屋</option>
                                <option value="ownerName">住户</option>
                                <option value="">车位</option>
                            </select>
                            <input type="text" placeholder="请输入" id="cashier_searchval">
                            <img src="images/search-icon.png" alt="" id="searchBtn">
                        </li>

                        <li>
                            搜索说明：输入姓名、手机、房号、车牌等即可快速搜索
                        </li>


                    </ul>

                </div>
            </div>

            <!-- 收银台搜索内容  -->
            <div id="searchCtn" class="table-form main-cashier cashier-search-ctn" style="display: none;">

                <!-- 头部 -->
                <div class="search-title" id="searchTitle">
                    <span class="searchTitleAcitve">收银台</span>
                    <span>历史缴费</span>
                </div>

                <!-- 详情 -->
                <div class="search-ctn">
                    <p>功能说明：根据房号，车位号，车牌号搜索未缴费后， 可选择相关住户 ，查看未缴费用，并进行收费</p>
                    <ul class="search-particulars">
                        <!-- <li>
                            小区：<span>中山国际</span>
                        </li>
                        <li>
                            住户姓名：<span>XX</span>
                        </li>
                        <li>
                            手机号：<span>XXXXXXXXX</span>
                        </li> -->
                    </ul>
                    <ul class="searchBtn">
                        <li id="cashier_pay" class="search_active">收款</li>
                        <li>添加临时收费</li>
                        <li>预存</li>
                        <li>打印</li>
                        <li>返回</li>
                    </ul>
                </div>

                <!-- 具体数据 -->
                <table class="search-data" cellspacing="0">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="" id="">
                            </th>
                            <th>类型</th>
                            <th>房屋/车位/车辆</th>
                            <th>费用 名称</th>
                            <th>时间</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>应收金额</th>
                            <th>优惠</th>
                            <th>滞纳金</th>
                            <th>预存抵扣</th>
                            <th>应缴金额</th>
                        </tr>
                    </thead>
                    <tbody id="cashier_tbody">
                        <tr>
                            <td>
                                <input type="checkbox" name="" id="">
                            </td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                        </tr>

                    </tbody>
                </table>

                <!-- 尾部 -->
                <div class="search-foot">
                    <!-- s上一页 -->
                    <div class="previousPageBtn">
                        &lt;
                    </div>
                    <!-- 页数 -->
                    <ul class="pageList" id="cashier_ul">
                        <li>
                            1
                        </li>
                        <li>
                            2
                        </li>
                    </ul>
                    <!-- 下一页 -->
                    <div class="nextPageBtn">
                        &gt;
                    </div>
                    <!-- 每页展示数据 -->
                    <select class="changeBtn">
                        <option value="10">
                            10条/页
                        </option>
                    </select>
                    <!-- 跳到多少页 -->
                    <div>
                        跳至
                        <input type="text" name="" id="SearchjumpPage" value="5" class="jumpPage">
                        页
                    </div>

                </div>


            </div>
            <!-- 收银台搜索内容模态框 -->
            <!-- 未缴账单 -->
            <div class="notPay table-form" style="display: none;">
                <!-- 头部标题 -->
                <div class="tableForm-title">
                    <h3>未缴账单</h3>
                    <p>
                        功能说明：可以点击房号或车位号，车牌号，姓名，手机号进入收银台，收取对应的未缴费用。
                    </p>
                </div>
                <!-- 导航 -->
                <div class="tableForm-nav">

                    <ul class="tableForm-nav-left">
                        <li>打印收费通知单</li>
                        <li>发短信</li>
                        <li>发微信</li>
                    </ul>

                    <ul class="tableForm-nav-right">
                        <li>
                            <input type="text" placeholder="小区/房号/收费项目/收费标准">
                            <span>
                                <img src="images/u488.png" alt="">
                            </span>
                            <span>
                                <img src="images/u1895.png" alt="">
                            </span>
                        </li>
                    </ul>
                </div>
                <p class="notPay-bill">

                    选中账单合计：应收：350.00元，优惠0.00元，滞纳金：0.00元 ， 应缴金额：350.00元
                </p>
                <!-- 表格 -->
                <table class="tableForm-data" cellspacing="0">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="" id="">
                            </th>
                            <th>小区</th>
                            <th>房号/车位号/车牌号/住户</th>
                            <th>住户姓名</th>
                            <th>手机号</th>
                            <th>费用名称</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>应收金额</th>
                            <th>优惠</th>
                            <th>滞纳金</th>
                            <th>应缴金额</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="noPay_tbody">
                        <tr>
                            <td>
                                <input type="checkbox" name="" id="">
                            </td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>
                                <span>删除</span>
                            </td>
                        </tr>

                    </tbody>
                </table>
                <!-- 页脚 -->
                <div class="tableForm-foot">
                    <!-- s上一页 -->
                    <div class="previousPageBtn">
                        &lt;
                    </div>
                    <!-- 页数 -->
                    <ul class="pageList" id="noPay_ul">
                        <li>
                            1
                        </li>
                        <li>
                            2
                        </li>
                    </ul>
                    <!-- 下一页 -->
                    <div class="nextPageBtn">
                        &gt;
                    </div>
                    <!-- 每页展示数据 -->
                    <select class="changeBtn">
                        <option value="10">
                            10条/页
                        </option>
                    </select>
                    <!-- 跳到多少页 -->
                    <div>
                        跳至
                        <input type="text" name="" value="5" class="jumpPage">
                        页
                    </div>

                </div>
            </div>

            <!-- 缴费通知 -->
            <div class="payment-notices table-form" style="display: none;">

                <div class="tableForm-title">
                    <h3>缴费通知</h3>
                    <p>
                        可通过发送微信或短信的方式提示缴费
                    </p>
                </div>
                <!-- 导航 -->
                <div class="tableForm-nav">

                    <ul class="tableForm-nav-left">
                        <li>打印收费通知单</li>
                        <li>发短信</li>
                        <li>发微信</li>
                    </ul>

                    <ul class="tableForm-nav-right">
                        <li>
                            <input type="text" placeholder="小区/房号/收费项目/收费标准">
                            <span>
                                <img src="images/u488.png" alt="">
                            </span>
                            <span>
                                <img src="images/u1895.png" alt="">
                            </span>
                        </li>
                    </ul>
                </div>
                <!-- 表格 -->
                <table class="tableForm-data" cellspacing="0" cellspadding="0">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="" id="">
                            </th>
                            <th>小区</th>
                            <th>房号</th>
                            <th>住户姓名</th>
                            <th>应收金额</th>
                            <th>短信通知</th>
                            <th>微信通知</th>
                            <th>操作</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="checkbox" name="" id="">
                            </td>
                            <td>中山国际</td>
                            <td>房号</td>
                            <td>住户姓名</td>
                            <td>应收金额</td>
                            <td>短信通知</td>
                            <td>微信通知</td>
                            <td>
                                <span>
                                    打印收费通知单
                                </span>
                                <span>
                                    发短信
                                </span>
                                <span>
                                    发微信
                                </span>
                            </td>

                        </tr>

                    </tbody>
                </table>
                <!-- 页脚 -->
                <div class="tableForm-foot">
                    <!-- s上一页 -->
                    <div class="previousPageBtn">
                        &lt;
                    </div>
                    <!-- 页数 -->
                    <ul class="pageList">
                        <li>
                            1
                        </li>
                        <li>
                            2
                        </li>
                    </ul>
                    <!-- 下一页 -->
                    <div class="nextPageBtn">
                        &gt;
                    </div>
                    <!-- 每页展示数据 -->
                    <select class="changeBtn">
                        <option value="10">
                            10条/页
                        </option>
                    </select>
                    <!-- 跳到多少页 -->
                    <div>
                        跳至
                        <input type="text" name="" value="5" class="jumpPage">
                        页
                    </div>

                </div>

            </div>

            <!-- 已交账单 -->
            <div class="paid table-form" style="display: none;">
                <!-- 头部标题 -->
                <div class="tableForm-title">
                    <h3>已缴账单</h3>
                    <p>
                        功能说明：可查看缴费记录及缴费明细等历史记录
                    </p>
                </div>

                <ul class="paid-lable-page">
                    <li class="paid-active">缴费记录</li>
                    <li>缴费明细</li>
                    <li>回收站</li>
                </ul>

                <!-- 导航 -->
                <div class="tableForm-nav paid-nav">

                    <ul class="tableForm-nav-left paid-nav-left">
                        <li>导入已缴费账单</li>
                        <li>删除</li>

                    </ul>

                    <ul class="tableForm-nav-right">
                        <li>
                            <input type="text" placeholder="小区/房号/收费项目/收费标准">
                            <span>
                                <img src="images/u488.png" alt="">
                            </span>
                            <span>
                                <img src="images/u1895.png" alt="">
                            </span>
                        </li>
                    </ul>
                </div>
                <!-- 账单 -->
                <p class="paid-bill">

                    选中账单合计：应收：350.00元，优惠0.00元，滞纳金：0.00元 ， 实收金额：350.00元
                </p>
                <!-- 表格 -->
                <table class="tableForm-data" cellspacing="0">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="" id="">
                            </th>
                            <th>小区</th>
                            <th>房号/车位号/车牌号/住户</th>
                            <th>住户姓名</th>
                            <th>手机号</th>
                            <th>费用名称</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>应收金额</th>
                            <th>优惠</th>
                            <th>滞纳金</th>
                            <th>应缴金额</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="yesPay_tbody">
                        <tr>
                            <td>
                                <input type="checkbox" name="" id="">
                            </td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>
                                <span>删除</span>
                            </td>
                        </tr>

                    </tbody>
                </table>
                <!-- 页脚 -->
                <div class="tableForm-foot">
                    <!-- s上一页 -->
                    <div class="previousPageBtn">
                        &lt;
                    </div>
                    <!-- 页数 -->
                    <ul class="pageList" id="yesPay_ul">
                        <li>
                            1
                        </li>
                        <li>
                            2
                        </li>
                    </ul>
                    <!-- 下一页 -->
                    <div class="nextPageBtn">
                        &gt;
                    </div>
                    <!-- 每页展示数据 -->
                    <select class="changeBtn">
                        <option value="10">
                            10条/页
                        </option>
                    </select>
                    <!-- 跳到多少页 -->
                    <div>
                        跳至
                        <input type="text" name="" value="5" class="jumpPage">
                        页
                    </div>

                </div>
            </div>

            <!-- 预存款管理 -->
            <div class="table-form advance-deposit" style="display: none;">
                <!-- 头部标题 -->
                <div class="tableForm-title">
                    <h3>预存款管理</h3>
                    <p>
                        功能说明：可以导出新增预存款，并查询明细
                    </p>
                </div>
                <!-- 标签页 -->
                <ul class="advance-deposit-lable-page">
                    <li class="advanceDeposit-active">预存款管理</li>
                    <li>预存款明细</li>

                </ul>
                <!-- 导航 -->
                <div class="tableForm-nav advanceDeposit-nav">

                    <ul class="tableForm-nav-left advanceDeposit-nav-left">
                        <li>预存款导入</li>
                        <li>预存款充值</li>
                    </ul>

                    <ul class="tableForm-nav-right">
                        <li>
                            <input type="text" placeholder="小区/房号/收费项目/收费标准">
                            <span>
                                <img src="images/u488.png" alt="">
                            </span>
                            <span>
                                <img src="images/u1895.png" alt="">
                            </span>
                        </li>
                    </ul>
                </div>
                <!-- 表格 -->
                <table class="tableForm-data" cellspacing="0">
                    <thead>
                        <tr>

                            <th>小区</th>
                            <th>住户姓名</th>
                            <th>手机号</th>
                            <th>类型</th>
                            <th>预存款余额</th>
                            <th>操作</th>

                        </tr>
                    </thead>
                    <tbody id="prestore_tbody">
                        <tr>
                            <td>小区</td>
                            <td>住户姓名</td>
                            <td>手机号</td>
                            <td>类型</td>
                            <td>预存款余额</td>
                            <td>
                                <span>查看</span>
                                <span id="recharge">充值</span>
                                <span>删除</span>
                            </td>
                        </tr>

                    </tbody>
                </table>
                <!-- 页脚 -->
                <div class="tableForm-foot">
                    <!-- s上一页 -->
                    <div class="previousPageBtn">
                        &lt;
                    </div>
                    <!-- 页数 -->
                    <ul class="pageList" id="prestore_ul">
                        <li>
                            1
                        </li>
                        <li>
                            2
                        </li>
                    </ul>
                    <!-- 下一页 -->
                    <div class="nextPageBtn">
                        &gt;
                    </div>
                    <!-- 每页展示数据 -->
                    <select class="changeBtn">
                        <option value="10">
                            10条/页
                        </option>
                    </select>
                    <!-- 跳到多少页 -->
                    <div>
                        跳至
                        <input type="text" name="" value="5" class="jumpPage">
                        页
                    </div>

                </div>

            </div>

            <!-- 历史缴费 -->
            <div id="historyPayment" class="table-form main-cashier cashier-search-ctn" style="display: none;">

                <!-- 头部 -->
                <div class="search-title">
                    <span>收银台</span>
                    <span>历史缴费</span>
                </div>

                <!-- 具体数据 -->
                <table class="search-data" cellspacing="0">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="" id="">
                            </th>
                            <th>类型</th>
                            <th>房屋/车位/车辆</th>
                            <th>费用 名称</th>
                            <th>时间</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>应收金额</th>
                            <th>优惠</th>
                            <th>滞纳金</th>
                            <th>预存抵扣</th>
                            <th>应缴金额</th>
                            <th>缴费人</th>
                            <th>缴费时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="checkbox" name="" id="">
                            </td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" name="" id="">
                            </td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                            <td>222</td>
                        </tr>
                    </tbody>
                </table>

                <!-- 尾部 -->
                <div class="search-foot">
                    <!-- s上一页 -->
                    <div class="previousPageBtn">
                        &lt;
                    </div>
                    <!-- 页数 -->
                    <ul class="pageList">
                        <li>
                            1
                        </li>
                        <li>
                            2
                        </li>
                    </ul>
                    <!-- 下一页 -->
                    <div class="nextPageBtn">
                        &gt;
                    </div>
                    <!-- 每页展示数据 -->
                    <select class="changeBtn">
                        <option value="10">
                            10条/页
                        </option>
                    </select>
                    <!-- 跳到多少页 -->
                    <div>
                        跳至
                        <input type="text" name="" id="" value="5" class="jumpPage">
                        页
                    </div>

                </div>
            </div>

            <!-- 收费设置首页 -->
            <div class="paySet-index table-form" style="display: none;">

                <!-- 标签页 -->
                <ul class="paySet-lablePage">
                    <li class="paySet-lablePage-active">收费项目类别</li>
                    <li>收费项目定义</li>
                    <li>收费标准设置</li>
                    <li>绑定收费标准</li>
                    <li>自动账单日设置</li>
                </ul>
                <!-- 收费项目类别 -->
                <div class="pay-project-class table-form" id="projectClass">

                    <!-- 导航 -->
                    <div class="tableForm-nav projectClass-nav">

                        <ul class="tableForm-nav-left">
                            <li id="projectClassAddBtn">新增</li>
                        </ul>

                        <ul class="tableForm-nav-right">
                            <li>
                                <input type="text" placeholder="小区/房号/收费项目/收费标准" id="p_searchInput">
                                <span id="projectClass_search">
                                    <img src="images/u488.png" alt="">
                                </span>
                            </li>
                        </ul>
                    </div>


                    <!-- 表格 -->
                    <table class="tableForm-data projectClass-data" cellspacing="0">
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" name="" id="">
                                </th>
                                <th class="projetctName"> 收费项目名称</th>
                                <th>备注</th>
                                <th class="projetctName">操作</th>
                            </tr>
                        </thead>
                        <tbody id="projectClass-data">
                            <!-- <tr>
                                            <td>
                                                <input type="checkbox" name="" id="">
                                            </td>
                                            <td>收费项目名称</td>
                                            <td>备注</td>
                                            <td>
                                                <span id="changeProjectName">编辑</span>
                                                <span>删除</span>
                                            </td>
                                        </tr> -->

                        </tbody>
                    </table>
                    <!-- 页脚 -->
                    <div class="tableForm-foot">
                        <!-- s上一页 -->
                        <div class="previousPageBtn" id="p_previousPageBtn">
                            &lt;
                        </div>
                        <!-- 页数 -->
                        <ul class="pageList" id="projectPages">
                            <!-- <li id="pageListActive"> 2</li> -->
                        </ul>
                        <!-- 下一页 -->
                        <div class="nextPageBtn" id="p_nextPageBtn">
                            &gt;
                        </div>
                        <!-- 每页展示数据 -->
                        <select class="changeBtn" id="p_change_pageSize">
                            <option value="3">
                                3条/页
                            </option>
                            <option value="7">
                                7条/页
                            </option>
                            <option value="10">
                                10条/页
                            </option>
                        </select>
                        <!-- 跳到多少页 -->
                        <div>
                            跳至
                            <input type="text" name="" value="5" class="jumpPage">
                            页
                        </div>

                    </div>
                </div>
                <!-- 项目定义 -->
                <div class="projetct-definiton table-form pay-project-class" style="display: none;"
                    id="projetctDefiniton">
                    <!-- 导航 -->
                    <div class="tableForm-nav projectClass-nav">

                        <ul class="tableForm-nav-left">
                            <li id="definitonAddBtn">新增</li>
                        </ul>

                        <ul class="tableForm-nav-right">
                            <li>
                                <input type="text" placeholder="小区/房号/收费项目/收费标准" id="D_searchInput">
                                <span id="D_search">
                                    <img src="images/u488.png" alt="">
                                </span>
                            </li>
                        </ul>
                    </div>
                    <!-- 表格 -->
                    <table class="tableForm-data projetctDefiniton-data" cellspacing="0">
                        <thead>
                            <tr>
                                <th><input type="checkbox" name="" id=""></th>
                                <th>收费项目名称</th>
                                <th>收费项目类别</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="projetctDefiniton-data">
                            <tr>
                                <td><input type="checkbox" name="" id=""></td>
                                <td>收费项目名称</td>
                                <td>收费项目类别</td>
                                <td>备注</td>
                                <td>
                                    <span>编辑</span>
                                    <span>删除</span>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                    <!-- 页脚 -->
                    <div class="tableForm-foot">
                        <!-- s上一页 -->
                        <div class="previousPageBtn" id="D_previousPageBtn">
                            &lt;
                        </div>
                        <!-- 页数 -->
                        <ul class="pageList" id="definiton_ul">
                            <!-- <li>
                                            1
                                        </li>
                                        <li>
                                            2
                                        </li> -->
                        </ul>
                        <!-- 下一页 -->
                        <div class="nextPageBtn" id="D_nextPageBtn">
                            &gt;
                        </div>
                        <!-- 每页展示数据 -->
                        <select class="changeBtn" id="D_changeBtn">
                            <option value="3">
                                3条/页
                            </option>
                            <option value="7">
                                7条/页
                            </option>
                            <option value="10">
                                10条/页
                            </option>
                        </select>
                        <!-- 跳到多少页 -->
                        <div>
                            跳至
                            <input type="text" name="" value="5" class="jumpPage">
                            页
                        </div>

                    </div>
                </div>
                <!-- 标准设置 -->
                <div class="projetct-paySet table-form pay-project-class" style="display: none;">
                    <!-- 导航 -->
                    <div class="tableForm-nav projectClass-nav">

                        <ul class="tableForm-nav-left">
                            <li id="paySetAddBtn">新增</li>
                            <li id="delPaySet">删除</li>
                            <li>复制收费标准</li>
                        </ul>

                        <ul class="tableForm-nav-right">
                            <li>
                                <input type="text" placeholder="小区/房号/收费项目/收费标准" id="S_searchInput">
                                <span id="S_search">
                                    <img src="images/u488.png" alt="">
                                </span>
                            </li>
                        </ul>
                    </div>
                    <!-- 表格 -->
                    <table class="tableForm-data " cellspacing="0">
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" name="" id="S_check">
                                </th>
                                <th> 小区</th>
                                <th>收费项目</th>
                                <th>收费标准名称</th>
                                <th>项目类别</th>
                                <th>金额计算方式</th>
                                <th>单价</th>
                                <th>计量方式</th>
                                <th>指定金额</th>
                                <th>收费周期</th>
                                <th>备注</th>

                            </tr>
                        </thead>
                        <tbody id="paySet_data">
                            <tr>
                                <td>
                                    <input type="checkbox" name="">
                                </td>
                                <td>小区</td>
                                <td>收费项目</td>
                                <td>收费标准名称</td>
                                <td>项目类别</td>
                                <td>金额计算方式</td>
                                <td>单价</td>
                                <td>计量方式</td>
                                <td>指定金额</td>
                                <td>收费周期</td>
                                <td>备注</td>
                            </tr>

                        </tbody>
                    </table>
                    <!-- 页脚 -->
                    <div class="tableForm-foot">
                        <!-- s上一页 -->
                        <div class="previousPageBtn" id="S_previousPageBtn">
                            &lt;
                        </div>
                        <!-- 页数 -->
                        <ul class="pageList" id="paySet_ul">
                            <!-- <li>
                                            1
                                        </li>
                                        <li>
                                            2
                                        </li> -->
                        </ul>
                        <!-- 下一页 -->
                        <div class="nextPageBtn" id="S_nextPageBtn">
                            &gt;
                        </div>
                        <!-- 每页展示数据 -->
                        <select class="changeBtn" id="S_changeBtn">
                            <option value="3">
                                3条/页
                            </option>
                            <option value="7">
                                7条/页
                            </option>
                            <option value="10">
                                10条/页
                            </option>
                        </select>
                        <!-- 跳到多少页 -->
                        <div>
                            跳至
                            <input type="text" name="" value="5" class="jumpPage">
                            页
                        </div>

                    </div>
                </div>
                <!-- 绑定收费标准 -->
                <div class="projetct-bindingPay table-form pay-project-class" style="display: none;">
                    <!-- 导航 -->
                    <div class="tableForm-nav projectClass-nav">

                        <ul class="tableForm-nav-left">
                            <li>添加收费标准</li>
                        </ul>

                        <ul class="tableForm-nav-right">
                            <li>
                                <input type="text" placeholder="小区/房号/收费项目/收费标准">
                                <span>
                                    <img src="images/u488.png" alt="">
                                </span>
                            </li>
                        </ul>
                    </div>
                    <!-- 表格 -->
                    <table class="tableForm-data " cellspacing="0">
                        <thead>
                            <tr>
                                <th></th>
                                <th>收费名称</th>
                                <th>收费项目</th>
                                <th>收费标准名称</th>
                                <th>小区</th>
                                <th>备注</th>
                                <th>操作</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td>收费名称</td>
                                <td>收费项目</td>
                                <td>收费标准名称</td>
                                <td>小区</td>
                                <td>备注</td>
                                <td>
                                    <span>编辑</span>
                                    <span>删除</span>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                    <!-- 页脚 -->
                    <div class="tableForm-foot">
                        <!-- s上一页 -->
                        <div class="previousPageBtn">
                            &lt;
                        </div>
                        <!-- 页数 -->
                        <ul class="pageList">
                            <li>
                                1
                            </li>
                            <li>
                                2
                            </li>
                        </ul>
                        <!-- 下一页 -->
                        <div class="nextPageBtn">
                            &gt;
                        </div>
                        <!-- 每页展示数据 -->
                        <select class="changeBtn">
                            <option value="10">
                                10条/页
                            </option>
                        </select>
                        <!-- 跳到多少页 -->
                        <div>
                            跳至
                            <input type="text" name="" value="5" class="jumpPage">
                            页
                        </div>

                    </div>
                </div>
                <!-- 自动账单日设置 -->
                <div class="projetct-statementDate table-form pay-project-class" style="display: none;">
                    <ul class="statementData">
                        <li>
                            每月几号自动生成账单
                            <select name="" id="">
                                <option value="" disabled selected style="display: none;">
                                    请选择每月几号生产账单
                                </option>
                                <option value="5">
                                    5
                                </option>
                                <option value="10">
                                    10
                                </option>
                                <option value="15">
                                    15
                                </option>
                            </select>
                        </li>

                        <li>
                            保存
                        </li>

                    </ul>
                </div>

                <!-- 模态框 -->

                <!-- 点击编辑渲染模态框 -->
                <div class="modalbox-template" id="templateModal">

                    <div class="header-div">
                        <h4>修改收费项目类别</h4>
                        <img src="./images/close.png" alt="">
                    </div>

                    <ul class="model-ul" id="model-ul">

                    </ul>

                    <div class="footer-div">
                        <button id="sureBtn">确定</button>
                        <button class="cancel-btn">取消</button>
                    </div>
                </div>

                <!-- 新增定义 模态框 -->
                <div class="modalbox-template" id="definitonModal">

                    <div class="header-div">
                        <h4>新增收费项目名称</h4>
                        <img src="./images/close.png" alt="">
                    </div>

                    <ul id="definitonModal_ul">
                        <li>
                            <label for="">收费项目名称:</label>
                            <input type="text" id="payClassName">
                        </li>
                        <li>
                            <label for="">收费项目类别:</label>
                            <select name="" class="definitonModal_select" id="definitonModal_select">
                                <!-- <option value="">1</option>
                                            <option value="">2</option>
                                            <option value="">3</option> -->
                            </select>
                        </li>
                        <li>
                            <label for="">备注:</label>
                            <input type="text" name="" id="PCN_remark">
                        </li>

                    </ul>

                    <div class="footer-div">
                        <button id="PCN_sureBtn">确定</button>
                        <button class="cancel-btn">取消</button>
                    </div>
                </div>

                <!-- 新增标准设置  -->
                <div class="modalbox-template" id="paySetModal">

                    <div class="header-div">
                        <h4>新增项目标准设置</h4>
                        <img src="./images/close.png" alt="">
                    </div>

                    <ul class="model-ul">
                        <li>
                            <label for="">小区:</label>
                            <select name="" id="commtiy_select"></select>
                        </li>
                        <li>
                            <label for="">收费类别:</label>
                            <select name="" class="definitonModal_select" id="project_setModal"></select>

                        </li>
                        <li>
                            <label for="">收费项目:</label>
                            <select name="" id="setClass_select"></select>

                        </li>
                        <li>
                            <label for="">收费标准名称:</label>
                            <input type="text" id="paySetName">
                        </li>
                        <li>
                            <label for="">单价:</label>
                            <input type="text" id="paySetPrice">
                        </li>
                        <li>
                            <label for="">金额计算方式:</label>
                            <input type="text" value="单价X数量" disabled>
                        </li>
                        <li>
                            <label for="">计量方式:</label>
                            <select name="" id="MathType">
                                <option value="建筑面积">建筑面积</option>
                                <option value="度数">度数</option>
                            </select>
                        </li>
                        <li>
                            <label for="">指定金额:</label>
                            <input type="text">
                        </li>
                        <li>
                            <label for="">收费周期:</label>
                            <select name="" id="chargeNorm">
                                <option value="每月1次">每月1次</option>
                                <option value="每季度1次">每季度1次</option>
                                <option value="每年1次">每年1次</option>
                            </select>
                        </li>
                    </ul>

                    <div class="footer-div">
                        <button id="paySet_sureBtn">确定</button>
                        <button class="cancel-btn">取消</button>
                    </div>
                </div>




            </div>

            <!-- 抄表录入 -->
            <div class="table-form" style="display: none;" id="tableForm">
                <!-- 头部标题 -->
                <div class="tableForm-title">
                    <h3>抄表录入</h3>
                    <p>
                        功能说明：抄表单需分月进行导入，导入或添加抄表数据后，立即生成相应的未缴费用账单，抄表费用完成缴费之前，可以对抄表数据进行修改。使用键盘左右键可以浏览更多数据。
                    </p>
                </div>
                <!-- 导航 -->

                <div class="tableForm-nav">

                    <ul class="tableForm-nav-left">
                        <li id="formData">录入数据</li>
                        <li>导出抄表数据</li>
                        <li>导入抄表数据</li>
                        <li>删除</li>
                    </ul>

                    <ul class="tableForm-nav-right">
                        <li>
                            <input type="text" placeholder="小区/房号/收费项目/收费标准" id="typeIn_input">
                            <span id="typeIn_search">
                                <img src="images/u488.png" alt="">
                            </span>
                            <span>
                                <img src="images/u1895.png" alt="">
                            </span>
                        </li>
                    </ul>
                </div>
                <!-- 表格 -->

                <table class="tableForm-data" cellspacing="0">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="" id="">
                            </th>
                            <th>小区</th>
                            <th>房号</th>
                            <th>收费项目</th>
                            <th>收费标准</th>
                            <th>录入时间</th>
                            <th>单价</th>
                            <th>起度</th>
                            <th>止度</th>
                            <th>用量</th>
                            <th>应收费</th>
                            <th>缴费状态</th>
                            <th>预存</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="typeIn_tbody">
                        <tr>
                            <td>
                                <input type="checkbox" name="" id="">
                            </td>
                            <td>小区</td>
                            <td>房号</td>
                            <td>收费项目</td>
                            <td>收费标准</td>
                            <td>录入时间</td>
                            <td>单价</td>
                            <td>起度</td>
                            <td>止度</td>
                            <td>用量</td>
                            <td>应收费</td>
                            <td>缴费状态</td>
                            <td>预存</td>
                            <td>
                                <span>编辑</span>
                                <span>删除</span>
                            </td>
                        </tr>

                    </tbody>
                </table>
                <!-- 页脚 -->
                <div class="tableForm-foot">
                    <!-- s上一页 -->
                    <div class="previousPageBtn" id="typeIn_previous">
                        &lt;
                    </div>
                    <!-- 页数 -->
                    <ul class="pageList" id="tableForm_ul">
                        <!-- <li>
                            1
                        </li>
                        <li>
                            2
                        </li> -->
                    </ul>
                    <!-- 下一页 -->
                    <div class="nextPageBtn" id="typeIn_next">
                        &gt;
                    </div>
                    <!-- 每页展示数据 -->
                    <select class="changeBtn" id="typeIn_change">
                        <option value="3">
                            3条/页
                        </option>
                        <option value="7">
                            7条/页
                        </option>
                        <option value="10">
                            10条/页
                        </option>
                    </select>
                    <!-- 跳到多少页 -->
                    <div>
                        跳至
                        <input type="text" name="" value="5" class="jumpPage">
                        页
                    </div>

                </div>
                <!-- 新增模态框 -->
                <!-- 录入设置 模态框  -->
                <div class="modalbox-template" id="formDataModal">

                    <div class="header-div">
                        <h4>新增项目标准设置</h4>
                        <img src="./images/close.png" alt="">
                    </div>

                    <ul class="model-ul">
                        <li>
                            <label for="">小区:</label>
                            <select name="" id="F_commtiy_select"></select>
                        </li>
                        <li>
                            <label for="">房号:</label>
                            <select name="" class="definitonModal_select" id="roomId">
                                <option value="1245">测试1234</option>
                            </select>

                        </li>
                        <li>
                            <label for="">收费项目:</label>
                            <select name="" id="form_class_select"></select>

                        </li>
                        <li>
                            <label for="">收费标准名称:</label>
                            <select name="" id="form_paySetName"></select>
                        </li>
                        <li>
                            <label for="">单价:</label>
                            <input type="text" id="form_paySetPrice" disabled value="由标准名称获得">
                        </li>
                        <li>
                            <label for="">录入时间:</label>
                            <input type="text" value="实时时间" disabled>
                        </li>
                        <li>
                            <label for="">起度:</label>
                            <input type="text" class="keyUp" id="startKey" value="0">
                        </li>
                        <li>
                            <label for="">止度:</label>
                            <input type="text" class="keyUp" id="endKey" value="0">
                        </li>
                        <li>
                            <label for="">用量:</label>
                            <input type="text" disabled value="0" id="count">
                        </li>
                        <li>
                            <label for="">应收费:</label>
                            <input type="text" disabled value="单价*用量">
                        </li>
                        <li>
                            <label for="">缴费状态:</label>
                            <input type="text" value="未缴费" disabled id="chargeState">
                        </li>
                        <li>
                            <label for="">预存:</label>
                            <input type="text" value="0" id="prestore">
                        </li>
                    </ul>

                    <div class="footer-div">
                        <button id="form_sureBtn">确定</button>
                        <button class="cancel-btn">取消</button>
                    </div>
                </div>
                <!-- 录入设置 修改页面 -->
                <div class="modalbox-template" id="change_formDataModal">

                    <div class="header-div">
                        <h4>修改项目标准设置</h4>
                        <img src="./images/close.png" alt="">
                    </div>

                    <ul class="model-ul">
                        <li>
                            <label for="">小区:</label>
                            <select name="" id="F_changeCommtiy_select">
                                <option value="1"></option>
                            </select>
                        </li>
                        <li>
                            <label for="">房号:</label>
                            <select name="" class="definitonModal_select" id="change_roomId">
                                <option value="1245">测试1234</option>
                            </select>

                        </li>
                        <li>
                            <label for="">收费项目:</label>
                            <select name="" id="formChange_class_select"></select>

                        </li>
                        <li>
                            <label for="">收费标准名称:</label>
                            <select name="" id="formChange_paySetName"></select>
                        </li>
                        <li>
                            <label for="">单价:</label>
                            <input type="text" id="formchange_paySetPrice" disabled value="0">
                        </li>
                        <li>
                            <label for="">录入时间:</label>
                            <input type="text" value="实时时间" disabled>
                        </li>
                        <li>
                            <label for="">起度:</label>
                            <input type="text" class="keyUp" id="change_startKey" value="0">
                        </li>
                        <li>
                            <label for="">止度:</label>
                            <input type="text" class="keyUp" id="change_endKey" value="0">
                        </li>
                        <li>
                            <label for="">用量:</label>
                            <input type="text" disabled value="0" id="change_count">
                        </li>
                        <li>
                            <label for="">应收费:</label>
                            <input type="text" disabled value="单价*用量" id="shouldPay">
                        </li>
                        <li>
                            <label for="">缴费状态:</label>
                            <select name="" id="change_chargeState">
                                <option value="未缴费">未缴费</option>
                                <option value="已缴费">已缴费</option>
                            </select>
                        </li>
                        <li>
                            <label for="">预存:</label>
                            <input type="hidden" value="" id="storageId">
                            <input type="text" value="0" id="change_prestore">
                        </li>
                    </ul>

                    <div class="footer-div">
                        <button id="changeform_sureBtn" data-id="">确定</button>
                        <button class="cancel-btn">取消</button>
                    </div>
                </div>
            </div>




        </div>
        </div>
    </main>
</body>

</html>